import React, { Component } from 'react';
import { Modal, Button } from 'antd';
// import QRCode from 'qrcode.react';
import QRCode from 'qrcode.react';

export default class index extends Component {
  state = {
    visible: false,
  };

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = e => {
    this.setState({
      visible: false,
    });
  };

  handleCancel = e => {
    this.setState({
      visible: false,
    });
  };

  downloadQRCode = () => {
    const qrCode = document.getElementById('qrCode');
    let imgData = qrCode.toDataURL('image/png');
    let link = document.createElement('a');
    link.href = imgData;
    link.download = 'qrcode.png';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };
  render() {
    const { record, source } = this.props;
    console.log(record.id);
    console.log(source);
    return (
      <div style={{ display: 'inline-block' }}>
        <Button type="primary" onClick={this.showModal}>
          医生端
        </Button>

        <Modal
          title="医生端二维码展示"
          width={500}
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" onClick={this.handleCancel}>
              返回
            </Button>,
            <Button key="confirm" type="primary" onClick={this.handleOk}>
              确认
            </Button>,
            <Button key="load" type="primary" onClick={this.downloadQRCode}>
              下载二维码
            </Button>,
          ]}
        >
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <QRCode
              id="qrCode"
              size={400}
              value={'http://ahjk.wncloud.net:8300/#/?orgId=' + record.id + '&source=' + source}
            />
          </div>
        </Modal>
      </div>
    );
  }
}
